<template>
    <div class="AdHome">
        <cjcNav title="建言献策(管理员)" @customRouter="customRouter" />
        <Row class="tabs">
            <Col span=11 @click.native="tolink('wait')" :class="{active: this.$route.name === 'wait'}">待分发</Col>
            <Col span=2>
            <span class="split"></span>
            </Col>
            <Col span=11 @click.native="tolink('complate')" :class="{active: this.$route.name === 'complate'}">已分发</Col>
        </Row>  
        <div style="padding-top:50px; height: 100%;">
            <router-view></router-view>
        </div>
        <Spin size="large" fix v-if="this.$store.state.Administrator.HandoutList === null || !this.$store.state.Administrator.NotHandoutList === null"></Spin>
    </div>
</template>

<script>
export default {
    data() {
        return {
            wadataLoaded: false,
            comdataLoaded: false
        }
    },
    components: {
        cjcNav: () => import('@/components/common/Nav.vue')
    },
    watch: {
        $route() {
        }
    },
    methods: {
        customRouter() {
            // 自定义路由
            this.$cjc.closeWebView()
        },
        tolink(link) {
            this.$router.push({
                name: link
            })
        },
        /**
         * 设置已分发列表
         * @pages 页数
         */
        async setHandoutList(pages) {
            const State = this.$store.state
            let HandoutList = await this.$store.dispatch('getHandoutList', {
                userId: State.userInfo.USER_ID,
                page: pages
            })
            this.$store.commit('SET_HandoutList', HandoutList.result)
        },
        /**
         * 设置未分发列表
         * @pages 页数
         */
        async setNotHandoutList(pages) {
            let NotHandoutList = await this.$store.dispatch('getNotHandoutList', {
                page: pages
            })
            this.$store.commit('SET_NotHandoutList', NotHandoutList.result)
        }
    },
    created() {
        const Vm = this
        /**
         * 确认用户信息是否加载
         */
        function isUserInfo() {
            return new Promise((resolve, reject) => {
                let isu = setInterval(() => {
                    if (Vm.$store.state.userInfo) {
                        clearInterval(isu)
                        resolve()
                    }
                }, 100)
            })
        }
        // 执行步骤
        async function Step() {
            if (Vm.$store.state.Administrator.HandoutList === null) {
                Vm.setHandoutList(1)
            }
            if (Vm.$store.state.Administrator.NotHandoutList === null) {
                Vm.setNotHandoutList(1)
            }
        }
        isUserInfo().then(() => {
            Step()
        })
    }
}
</script>

<style lang="less">
.AdHome {
    height: 100%;
    .line-pad {
        background-color: #f8f8f8;
        width: 100%;
        height: 20px;
    }
    .nav .title {
        font-size: 15px;
        letter-spacing: 0;
    }
    .tabs {
        position: fixed;
        top: 50px;
        width: 100%;
        z-index: 8;
        text-align: center;
        font-size: 15px;
        height: 50px;
        line-height: 30px;
        padding: 10px 0;
        background-color: #fff;
        border-bottom: 1px solid #eaeaea;
        .active {
            color: rgb(45, 140, 240);
        }
        .split {
            display: inline-block;
            background-color: #dfdfdf;
            width: 1px;
            height: 30px;
        }
    }
}
</style>
